<template>
  <div id="recommend">
    <com-head>{{headmes}}</com-head>
    <div class="scrolltop" @click="scrolltop"></div>
    <!-- <div class="top">免费推荐</div> -->
    <div class="wai">
        <div class="news" v-for="(item, index) in data" @click="geidetail(item.id)" :key="index">
            <div class="imgl">
              <img :src="item.img" alt="">
            </div>
            <div class="textr">
              <p>{{item.title}}</p>
              <p>{{item.content}}</p>
              <p>{{item.add_time}}</p>
            </div> 
        </div>
    </div>
    <com-foot :select="1"></com-foot>
  </div>
</template>

<script>
import Bscroll from 'better-scroll';
export default {
  name: 'recommend',
  data () {
    return {
      status: this.$route.query.status,
      page: "",
      headmes: '',
      ID: "data.id",
      items: [],
      offset: 0,
      data: [],
      // select: '1'
    };
  },
  created () {
		this.getrecommend();
		
  },
  // mounted () {
  //   this.$nextTick(() => {
  //     this.scroll = new Bscroll(this.$refs.wai, {
  //       click: true,
  //       dblclick:true,
  //       });
  //   })
  // },
  methods:{
    // 返回顶部
    scrolltop () {
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(this.scrolltop);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }},
    getrecommend (){
      this.axios.get('News/lvyin')
      .then(response=>{
        this.headmes = '绿茵彩精'
        // this.select = '1'
        console.log(response);
        this.data=response.data.news;
        this.page=response.data.pages;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    geidetail (id) {
      this.$router.push({name: 'detail', query: {id: id}});
    }
  }
};
</script>

<style lang="scss">
  #recommend {
    background: #ffc29b;
    padding-top: 100px;
    .scrolltop {
      height: 80px;
      width: 75%;
      background-color: transparent;
      position: fixed;
      top: 0;
      left: 25%;
      z-index: 99;
    }
    .top {
      height: 60px;
      background-image: url(../assets/images/topHong.png);
      background-position: center; 
      background-size: contain;
      background-repeat: no-repeat;
      color: white;
      font-size: 24px;
      text-align: center;
      line-height: 60px; 
      margin-bottom: 39px;
    }
    .wai {
      margin: 0 28px;
      background: white;
      .news {
      background: white;
      height: 174px;
      width: 100%;
      padding: 22px 12px;
      box-sizing: border-box;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;
      &:first-child {
        margin-top: -20px;
      }
      .imgl {
        height: 131px;
        width: 195px;
        display: inline-block;
        overflow: hidden;
        img {
        width: 100%;
        }
      }
      .textr { 
        box-sizing: border-box;
        width: 430px; 
        p { 
          width: 100%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          line-height:43px;
        }
        p:nth-of-type(1) {
          font-size:26px;
          color:rgba(77,77,77,1);
        }
        p:nth-of-type(2) {
          font-size:20px;
          color:rgba(124,124,124,1);
        }
        p:nth-of-type(3) {
          font-size:18px;
          color:rgba(153,153,153,1);
        }
      }
      
    }
    }
  }
</style>
